By Colin Polonowski
Hypertext Mark-Up Language, or HTML as it is more commonly known, is the new big thing in the computer world. Without it, the Internet would probably still be the home of only serious computer users.

HTML is the language behind the World Wide Web...

This is the first of a series of tutorials which aim to teach you the ins and outs of the language. Over the coming issues you will learn how to create a number of high quality eye-catching web pages with just your Atari, a basic Text Editor and a graphics package or two.

The Basics

All HTML documents have a basic structure. This enables the browser to carry out a few basic things. The main structure is shown below. 
<html>
This tells your browser it is an HTML file
<head>
This marks the start of the header
<title>
This marks the start of the title. The title is displayed in the bar at the top of the window
Example Title
</title>
Ends the title
</head>
Ends the header
<body>
Marks the start of the main document
All Text and Pictures
</body>
Marks the end of the main document
</html>
Marks the end of the HTML file

There are a few occasions when this will differ. I will cover them in future issues.

HTML documents are made up of both text and graphics formatted with 'tags'. Tags tell any web browser what to do with the piece of writing or picture you are using.

Most tags consist of a start tag (for example <center>) and an end tag (for example </center>). Any thing between the tags is then formatted accordingly. 

<center>This text will be centered</center>
This text will be centered

There are some occasions when this does differ, but these will come apparent shortly.

Formatting Text

The strength of the HTML language is in the number of ways text can be laid out and formatted. This is in fact very simple to do and makes use of tags. Some useful examples are below.

<b></b>
Bold 
<i></i>
Italic 
<u></u>
Underscore 
<Hn></Hn>
Heading. n can be between 1 (big) and 6 (small)

You can also use the <font> tag to give text different characteristics such as different colours or sizes. To separate paragraphs, you can use the <p> tag, or line breaks can be included by using the <br> tag. The effects of most tags can be combined, so for example you can get text which is both bold and italic, or even a colorful, bold, italic heading.

If you need to display a list then the HTML language has some useful options...

Unordered List
HTML CodeBrowser display
<ul>
<li> First Item
<li> Second Item
<li> Last Item
</ul>
  • First Item
  • Second Item
  • Last Item
Ordered List
HTML CodeBrowser display
<ol>
<li> First Item
<li> Second Item
<li> Last Item
</ol>
  1. First Item
  2. Second Item
  3. Last Item

You can also combine lists to create 'nested' lists...

Nested lists
HTML CodeBrowser Display
<ul>
<li> First Item
<ol> 
<li> Example 1
<li> Example 2
</ol>
<li> Second Item
<ol>
<li> Example 3
<li> Example 4
</ol>
</ul>
  • First Item
    1. Example 1
    2. Example 2
  • Second Item
    1. Example 3
    2. Example 4

Attributes

Most tags make use of attributes to give you even more control. For example, with unordered lists you can specify the shape of the bullet by using the following code <ul type=n> where n is the shape you want, it can be square, circle or disc.

All the available attributes are listed in the glossary.

Next time

Next issue we will look at how to add images to your documents as well as how to link to other pages...

HTML made EZ Glossary